<template>
  <div id="student-course">
    <!-- 左侧--栅栏部分 -->
    <course-menu @tabItemClick="tabItemClick" />

    <!-- 主要部分 -->
    <div class="container">
      <div class="box" :is="currentView"></div>
    </div>
  </div>
</template>

<script>
import CourseMenu from './childComps/CourseMenu';

/* 显示栏部分 */
import CourseTask from './childComps/CourseTask';
import CourseWork from './childComps/CourseWork';
import CourseTest from './childComps/CourseTest';
import CourseExam from './childComps/CourseExam';
import CourseRecord from './childComps/CourseRecord';

export default {
  name: 'StudentCourse',
  components: {
    CourseMenu,
    CourseTask,
    CourseTest,
    CourseWork,
    CourseExam,
    CourseRecord,
  },
  data() {
    return {
      tabControls: ['CourseTask', 'CourseWork', 'CourseTest', 'CourseExam', 'CourseRecord'],
      CourseTask: 'CourseTask',
      CourseWork: 'CourseWork',
      CourseTest: 'CourseTest',
      CourseExam: 'CourseExam',
      CourseRecord: 'CourseRecord',
      currentView: 'CourseTask' /* 默认选择第一项 */,
    };
  },
  props: {
    courseInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {},
  methods: {
    tabItemClick(index) {
      this.currentView = this.tabControls[index];
    },
  },
};
</script>

<style scoped>
.container {
  position: absolute;
  inset: 52px 0 0 180px;
  min-height: 760px;
  min-width: 1040px;
  background: #eee;
}
.box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px 0 #edeef080;
}
</style>